<template>
  <li class="nav-item-wrapper" :class="{ 'is-open': isExpanded }">
    <div
      class="nav-item"
      :class="{ 'is-active': isActive, 'is-parent': hasChildren }"
      @click="handleClick"
    >
      <AxiomIcon v-if="item.icon" :name="item.icon" class="nav-icon" />
      <span v-if="!isCollapsed" class="nav-text">{{ item.title }}</span>
      <AxiomIcon
        v-if="hasChildren && !isCollapsed"
        name="ArrowDown"
        class="nav-arrow"
      />
    </div>
    <transition name="nav-submenu-transition">
      <ul v-if="hasChildren && isExpanded && !isCollapsed" class="nav-submenu">
        <AxiomPCSidebarNavItem
          v-for="child in item.children"
          :key="child.id"
          :item="child"
          :is-collapsed="isCollapsed"
          :is-active-func="isActiveFunc"
          :open-ids="openIds"
          @toggle="$emit('toggle', $event)"
          @navigate="$emit('navigate', $event)"
        />
      </ul>
    </transition>
  </li>
</template>

<script>
import AxiomIcon from '../common/AxiomIcon.vue';

export default {
  name: 'AxiomPCSidebarNavItem',
  components: {
    AxiomIcon
  },
  props: {
    item: { type: Object, required: true },
    isCollapsed: Boolean,
    isActiveFunc: { type: Function, required: true },
    openIds: { type: Set, required: true },
  },
  emits: ['toggle', 'navigate'],
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length > 0
    },
    isExpanded() {
      return this.openIds.has(this.item.id)
    },
    isActive() {
      return this.isActiveFunc(this.item)
    },
  },
  methods: {
    handleClick() {
      if (this.hasChildren) {
        this.$emit('toggle', this.item)
      } else {
        this.$emit('navigate', this.item.path)
      }
    },
  },
}
</script> 